<template>
  <el-card>
    <div slot="header">
      <span>商品列表</span>
    </div>
    <div class="content">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品ID">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="所属分类">
                <span>{{ props.row.category }}</span>
              </el-form-item>
              <el-form-item label="商品图片">
                <span>
                  <img :src="props.row.imgUrl" width="50" height="50" />
                </span>
              </el-form-item>
              <el-form-item label="商品评价">
                <span>{{ props.row.rating }}</span>
              </el-form-item>
              <el-form-item label="商品描述">
                <span>{{ props.row.goodsDesc }}</span>
              </el-form-item>
              <el-form-item label="商品名称">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="商品价格">
                <span>{{ props.row.price }}</span>
              </el-form-item>
              <el-form-item label="创建时间">
                <span>{{ props.row.ctime }}</span>
              </el-form-item>
              <el-form-item label="商品销量">
                <span>{{ props.row.sellCount }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <!-- 商品名称 -->
        <el-table-column label="商品名称" prop="name"> </el-table-column>
        <!-- 所属分类 -->
        <el-table-column label="所属分类" prop="category"> </el-table-column>
        <!-- 商品价格 -->
        <el-table-column label="商品价格" prop="price"></el-table-column>
        <!-- 商品图片 -->
        <el-table-column label="商品图片" prop="imgUrl">
          <template slot-scope="scope">
            <img :src="scope.row.imgUrl" width="50" height="50" />
          </template>
        </el-table-column>
        <!-- 商品描述 -->
        <el-table-column label="商品描述" prop="goodsDesc"> </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码 -->
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page="currentPage"
        :page-sizes="[5, 6, 8, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 模态框 -->
      <!-- //模态框 -->
      <el-dialog
        title="修改商品"
        :visible.sync="dialogVisible"
        width="500px"
        :before-close="handleClose"
      >
        <span
          ><el-form :model="ruleForm" :rules="rules" ref="ruleForm"  >
            <!-- 商品名称 -->
            <el-form-item label="商品名称" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <!-- 商品分类 -->
            <el-form-item label="商品分类" prop="category">
              <el-select v-model="ruleForm.category" placeholder="请选择商品分类" @visible-change="changeCategory">
                <el-option v-for="v in selectOption" :key="v" :label="v" :value="v"></el-option>
                
              </el-select>
            </el-form-item>
            <!-- 商品价格 -->
            <el-form-item label="商品价格" prop=" price">
              <el-input-number
                v-model="ruleForm.price"
                @change="handleChange"
                :min="1"
                :max="10"
                label="描述文字" 
              ></el-input-number>
            </el-form-item>
            <!-- 商品图片 -->
            <el-form-item label="商品图片" prop="imgUrl">
              <el-upload
                class="avatar-uploader"
                action="http://127.0.0.1:5000/goods/goods_img_upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="ruleForm.imgUrl" :src="ruleForm.imgUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <!-- 商品描述 -->
            <el-form-item label="商品描述" prop="goodsDesc">
              <el-input v-model="ruleForm.goodsDesc" ></el-input>
            </el-form-item> </el-form
        ></span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirm"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </el-card>
</template>

<script>
import { getGoodsList,goodEdit,categories,goodsDel} from "@/api/goods";
export default {
  data() {
    return {
      //表单数据
      tableData: [],
      //页码数据
      currentPage: 1, //当前页
      total: 0, //总条数
      pageSize: 5, //每页条数
      //模态框
      dialogVisible: false, //对话框默认是隐藏
      //模态框数据
      ruleForm: {
        name: "",
        category: "",
        price: "",
        imgUrl: "",
        goodsDesc:'',
        id: '',
        },
        //下拉框的数据
        selectOption:[],
      //校验规则
      rules: {
        name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择商品分类", trigger: "change" },
        ],

        
      },
 
    };
  },
  methods: {
    //获取商品列表
    async goodsList() {
      let res = await getGoodsList({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        // name:this.name,
        // category:this.category,
      });
      console.log(res.data);

      if (res) {
        let { data, total } = res.data;
        this.total = total;
        this.tableData = data;
      }
    },
    //编辑按钮
    handleEdit(index, row) {
      console.log(index, row,'hjh');
      //数据回填  将渲染到模态框中
      let {name,category,price,imgUrl,goodsDesc,id} =row
      this.ruleForm.name=name
      this.ruleForm.category=category
      this.ruleForm.price=price
      this.ruleForm.imgUrl=imgUrl
      this.ruleForm.goodsDesc=goodsDesc
      this.ruleForm.id=id
      //模态框的状态
      this.dialogVisible=true
    },
    //点击确定按钮发送ajax
    async confirm(){
      //发送ajax数据
      let res = await goodEdit(this.ruleForm)
      let {code,msg} = res.data
      if(code===0){
        this.$message.success(msg)
      }else{
        this.$message.error(msg)
      }
      //更新列表
      this.goodsList()
      //关闭模态框
      this.dialogVisible=false
    },
    //删除
  async  handleDelete(index, row) {
      // console.log(index, row);
    let res =await goodsDel({ id: row.id })
    let {code,msg} = res.data
    if(code===200){
      this.$message.success(msg)
    }else{
      this.$message.error(msg)
    }
    this.getList(); //重新加载页面
    },
    //页码
    //当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.goodsList(); //更新数据
    },
    //当前一页有几个
    handleSizeChange(val) {
      this.pageSize = val;
    },
    //模态框弹框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //模态框商品价格 计数器
    handleChange(value) {
      console.log(value);
    },
    //模态框商品图片
    //图片上传成功的钩子
    handleAvatarSuccess(res, file) {
      console.log(res,'jkj');
      this.ruleForm.imgUrl = res.imgUrl
    },
    //图片上传之前的钩子
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //当改变下拉框时触发
   async changeCategory(status){
    console.log(status);//状态为false/true
    if(status){
      let res = await categories()
      // console.log(res);
      //将数据渲染给selectOption
      this.selectOption= res.data
    }
      
    },
  },

  //生命周期
  created() {
    this.goodsList();
  },
};


</script>

<style lang="less" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

/* 模态框 商品图片 */
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>